<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <script src="./static/js/editChildProduct.js" th:src="@{/js/editChildProduct.js}"></script>
    <script src="./static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <th:block th:include="include :: header('编辑子商品')" />

</head>
<body class="white-bg">
<div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-add" enctype="multipart/form-data" >
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">子商品名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="name" id="name" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">价格：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="price" id="price" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">库存：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="stock" id="stock" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">上传图片：</label>
            <p class="avatar-img">
            <div style="width: 120px;height: 90px">
            <a href="#" class="addwordExperience"  v-show='!imgshow' style="padding-left:45px;height: 95px;line-height: 95px;font-size: 26px;color: #bbb;position: absolute;width: 140px;">+</a>
            <img class="middleFace" id="showimg"  alt="" style="width: 120px;height:90px;position: absolute;">
            <input class="addwordExperience" id="img" onchange="changepic(this)" type="file" style="height: 90px;width: 120px;opacity:0;"/>
        </div>
            </p>
        </div>

        <!--	大小-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">规格：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="size" id="size" required>
            </div>
        </div>
        <!--			颜色-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-3 control-label is-required">颜色：</label>-->
        <!--            <div class="col-sm-8">-->
        <!--                <input class="form-control" type="text" name="color" id="color" required>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--			详细信息info-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">详细信息：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="info" id="info" required>
            </div>
        </div>
        <!--			从分类表里面读取-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">分类：</label>
            <div class="col-sm-8">
                <!--					下拉框，从数据库中读取分类数据-->
                <select class="form-control" id="state" name="state">
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    function changepic() {

        var reads= new FileReader();

        f=document.getElementById('img').files[0];

        console.log(f);

        reads.readAsDataURL(f);

        reads.onload=function (e) {
            document.getElementById('showimg').src=this.result;
            content.imgshow = true;
        };
    }
    var content = new Vue({
        el: '#app',
        data: {
            pic: '',
            imgshow : false,
            product: [],
        }
    });
    var prefix = ctx + "water";
    var id = [[${child_id}]];
    var product_id;
    $(document).ready(function () {
        $.ajax({
            url: prefix + "/childProduct_info/"+id,
            type: "post",
            dataType: "json",
            success: function (data) {
                /**
                 * 设置个人资料input框默认原有值
                 */
                console.log(data);
                //账户手机号
                $("#name").val(data.pb.name);
                $("#price").val(data.pb.price/100);
                $("#stock").val(data.pb.stock);
                if(data.pb.img==null){
                    document.getElementById('showimg').src='';
                }else{
                    document.getElementById('showimg').src=data.pb.img;
                }
                $("#size").val(data.pb.size);
                $("#info").val(data.pb.info);
                $("#state").val(data.pb.state);
                content.product = data.pb;
                product_id = data.pb.product_id;
            },
            error: function (data) {
                console.log(data);
            }
        });
    });

    function submitHandler() {
        const img = document.getElementById("img").files[0];
        console.log(img);
        var form = $('#form-product-add')[0];
        console.log(form);
        var data = new FormData(form);
        console.log(data);
        data.append('headImg', img);
        console.log(data.get('headImg'));
        var url = prefix+"/editChildProduct/"+id+"/"+product_id;
        $.operate.save1(url,data);
    }
</script>



</body>
</html>
